<template>
  <div class="tableDate">
    <div>
      <el-steps :space="200" :active="3" finish-status="success" align-center>
        <el-step title="已完成">1</el-step>
        <el-step title="已完成">2</el-step>
        <el-step title="已完成">3</el-step>
        <el-step title="上传附件">4</el-step>
      </el-steps>
      <div style="color: #4A5064; background-color: #C7C7C7; height: 50px; width: 95%; text-align: center; border-radius: 4px;">
        <div style="font-family:'PingFangSC'; float: left; font-size: 25px; margin-top: 8px; margin-left: 10px">附件</div>
      </div>
    </div>
    <!--方案文档-->
    <div style="margin-top: 5px; color: #4A5064; background-color: #ffffff; border-radius: 4px; width:95%">
      <el-upload
        class="upload-demo"
        style="width:400px"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture">
        <div>
          <div style="font-family:'PingFangSC'; float: left; font-size: 20px; margin-top: 8px; margin-left: 10px">文件扫描副本</div>
          <el-button size="small" type="primary" style="margin-left: 50px; margin-top: 8px">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">请上传不超过3M的jpg/png格式文件</div>
        </div>
      </el-upload>
    </div>
    <p>
      <el-button type="primary" style="width: 100px" @click="openMessageBox">提交</el-button>
    </p>

    <el-dialog
      title="图片预览"
      :visible.sync="previewVisible"
      width="50%">
      <div style="text-align: center">
        <img :src="previewPath" >
      </div>

      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        fileList: [
          //{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
        ],
        previewPath:'',
        previewVisible:false,
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
        this.previewPath = file.url;
        this.previewVisible = true;
      },

      toEquipmentList(){
        this.$router.push({ path: '/equipmentList' });
      },

      openMessageBox(){
        this.$message({
          showClose: true,
          message: `方案编码为 ${this.$root.planId} 的设备研制方案提交成功！`,
          type: 'success'
        });
        this.$router.push({ path: '/equipmentList' })
      }
    }
  }
</script>
